//固定栏效果
var rights=document.querySelector('.fixed').children;
var fixop=rights[0];
var poption=rights[1];
var fixlis=fixop.children[0].children;
var poptionlis=poption.children;
for(let i=0;i<fixlis.length-1;i++){
   fixlis[i].index=i;
   fixlis[i].addEventListener('mouseover',function(){
      poption.className="poption";
      for(let j=0;j<poptionlis.length;j++){
         fixlis[j].className="";
         poptionlis[j].style.display="none";
      }
      poptionlis[this.index].style.top+=60*i+'px';
      poptionlis[this.index].style.display='block';
   })
}
fixop.addEventListener('mouseout',function(){
   poption.className='poption hide'
})
poption.addEventListener('mouseout',function(){
   poption.className='poption hide'
})
//回到顶部效果
$(fixlis[4]).on('click',function(){
$('body,html').animate({
   scrollTop:0,
},300)
});
/******************商品效果图***************************/
let index = 0;//保存当前显示图片的序号
   let timer;//保存定时器标识
   const imgs = document.querySelectorAll('.right-img img');
   timer = setInterval(autoPlay, 1000);
   function autoPlay() {
      // 找到当前要来显示的图片地址
      index++;
      // 如果加到4表示已经显示到了最后一张图片，需要重置到第一张图片
      if (index == imgs.length) {
         index = 0;
      }
      changeImg();
   }
   function changeImg() {
      document.querySelector('.left-img img').src = imgs[index].src;
      // 处理小图的透明度
      for (let i = 0; i < imgs.length; i++) {
         let op = (i == index) ? 1 : 0.5
         imgs[i].style.opacity = op;
      }
   }
   for (let i = 0; i < imgs.length; i++) {
      imgs[i].onmouseenter = function () {
         clearInterval(timer);
         // 设置当前的图片显示  i代表当前划入的图片的序号
         // 当划入到当前图片 设置index变量保存当前的图片序号
         index = i;
         changeImg();
      }
      imgs[i].onmouseleave = function () {
         timer = setInterval(autoPlay, 1000);
      }
   }
